<template>
    <div>
        <el-menu router unique-opened active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
            :default-active="path" text-color="#fff">
            <el-menu-item index="/home">
                <template #title>
                    <el-icon>
                        <CollectionTag />
                    </el-icon>
                    <span>首页</span>
                </template>
            </el-menu-item>
            <el-sub-menu v-for="item in store.getters.getUserInfo.menus" :key="item.id" :index="item.id.toString()">
                <template #title>
                    <el-icon>
                        <Tools />
                    </el-icon>
                     <!-- <el-icon  type="success">
                            <component :is="item.icon"></component>
                        </el-icon>-->
                    <span>{{item.title}}</span> 
                </template>
                <el-menu-item v-for="child in item.children" :key="child.id" :index="child.url">{{child.title}}</el-menu-item>
            </el-sub-menu>
        </el-menu>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useRouter,useRoute } from 'vue-router'
import {useStore} from 'vuex'
let store = useStore()
let path = ref('/home')
// let router = useRouter()
let route = useRoute()
onMounted(() => {
    // path.value = router.currentRoute.value.path
    path.value = route.path
    // console.log(router,'aaa');
    // console.log(route,'bbb');
    console.log(path,'bb');
})
</script>

<style scoped>
.el-menu {
    min-height: 600px;
}
</style>
